<template>
  <div style="height:auto;">
    <div class="item-intro-show">
      <div class="item-intro-detail" ref="itemIntroDetail">
        <div class="item-intro-nav item-tabs">
          <Tabs :animated="false" @on-click="tabClick">
            <TabPane label="Product introduction">
              <div class="item-intro-img" ref="itemIntroGoods">
                <div class="item-intro" v-html="goodsHtml" v-if="goodsHtml" style="font-size: 14px;"></div>
                <div v-else style="margin:20px;">No product description</div>
              </div>
            </TabPane>
            <TabPane label="Commodity evaluation">
              <div class="remarks-container" ref="itemGoodsComment">
                <div class="remarks-analyse-box">
                  <div class="remarks-analyse-goods">
                    <i-circle :percent="skuDetail.grade" stroke-color="#5cb85c">
                      <span class="remarks-analyse-num">{{skuDetail.grade}}%</span>
                      <p class="remarks-analyse-title">Favorable rate</p>
                    </i-circle>
                  </div>
                </div>
                <div class="remarks-bar">
                  <span @click="viewByGrade('')" :class="{selectedBar: commentParams.grade === ''}">All({{commentTypeNum.all}})</span>
                  <span @click="viewByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">Good reputation({{commentTypeNum.good}})</span>
                  <span @click="viewByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">Medium review({{commentTypeNum.moderate}})</span>
                  <span @click="viewByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">Negative comment({{commentTypeNum.worse}})</span>
                </div>
                <div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0">
                  No evaluation data is available
                </div>
                <div class="remarks-box" v-for="(item,index) in commentList" :key="index" v-else>
                  <div class="remarks-user">
                    <Avatar :src="item.memberProfile" />
                    <span class="remarks-user-name">{{item.memberName | secrecyMobile}}</span>
                  </div>
                  <div class="remarks-content-box">
                    <p>
                      <Rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></Rate>
                    </p>
                    <p class="remarks-content">{{item.content}}</p>
                    <div class="comment-img" v-if="item.images">
                      <div v-for="(img, imgIndex) in item.images.split(',')"
                       @click="previewImg(img, item)"
                       :class="{borderColor:img === item.previewImg}"
                       :key="imgIndex">
                        <img :src="img" alt="">
                      </div>
                    </div>

                    <div class="preview-img"  v-if="item.previewImg"  @click.prevent="hidePreviewImg(item)">
                      <div>
                        <span @click.stop="rotatePreviewImg(0, item)"><Icon type="md-refresh" />Left turn</span>
                        <span @click.stop="rotatePreviewImg(1, item)"><Icon type="md-refresh" />dextroversion</span>
                      </div>
                      <img :src="item.previewImg" :style="{transform:`rotate(${item.deg}deg)`}" width="198" alt="">
                    </div>
                    <p class="remarks-sub">
                      <span class="remarks-item">{{item.goodsName}}</span>
                      <span class="remarks-time">{{item.createTime}}</span>
                    </p>

                    <!-- 商家回复 -->
                    <div class="reply" v-if="item.reply">
                      <p>Merchant reply</p>
                      <div>
                        <p class="remarks-content">{{ item.reply }}</p>
                        <div>
                          <div class="comment-img" v-if="item.replyImage">
                            <div v-for="(img, imgIndex) in item.replyImage.split(',')"  @click="$previewImage(img)" :key="imgIndex">
                              <img :src="img" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="remarks-page">
                  <Page :total="commentTotal" size="small"
                    @on-change="changePageNum"
                    @on-page-size-change="changePageSize"
                    :page-size="commentParams.pageSize"
                    ></Page>
                </div>
              </div>
            </TabPane>
            <TabPane label="Commodity parameter">
              <template v-if="detail.goodsParamsDTOList && detail.goodsParamsDTOList.length">
                <div class="goods-params" style="height:inherit;" v-for="item in detail.goodsParamsDTOList" :key="item.groupId">
                  <span class="ml_10">{{item.groupName}}</span>
                  <table class="mb_10" cellpadding='0' cellspacing="0" >
                    <tr v-for="param in item.goodsParamsItemDTOList" :key="param.paramId">
                      <td style="text-align: center">{{param.paramName}}</td><td>{{param.paramValue}}</td>
                    </tr>
                  </table>
                </div>
              </template>
              <div v-else>No product parameters</div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsComment, goodsCommentNum } from '@/api/member.js';
export default {
  name: 'ShowGoodsDetail',
  props: {
    detail: { // 商品详情
      type: Object,
      default: null
    }
  },
  data () {
    return {
      commentList: [], // 评论列表
      commentParams: { // 评论传参
        pageNumber: 1,
        pageSize: 10,
        grade: '',
        goodsId: ''
      },
      commentTypeNum: {}, // 评论数量，包括好中差分别的数量
      commentTotal: 0, // 评论总数
      onceFlag: true, // 只调用一次
      goodsHtml: '<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description" role="tabpanel" aria-labelledby="tab-title-description" style=""><p>&nbsp;</p><p>【Strong Vibration &amp; Quick Thrust Vibrating Egg Ball- Help You Reach Climax within Seconds】This is the first bullet vibrator with thrusting &amp; vibrating function together, which powerfully stimulates and massages the g spot, makes you reach heaven pleasure within only seconds. Imagine that while thrust and vibrate, the ripples touch your sweet spot, touch your desires, then the stong thrusting vibration more realistic than nomal sex, sexual flower bloom, desire more and more.</p><p>&nbsp;</p><p>【SVAKOM APP Remote Control Interactive Thrusting Dildo Bullet Vibrator】Spice up long-distance sex love play with SVAKOM APP thrusting vibrator. Designed to target inner sweet spots hands-free, once in place, snuggle effortlessly against G spot and surrounding erogenous zones. Connect the vibrating egg to the app,watch her satisfied face and hear happy moans during phone sex gameplay in real-time. Also it is remote wearable vibrator for Date Night.</p><p>&nbsp;</p><p>【Bullet Thrusting Sex Toy with Multi Intense Vibrations＆Thrusting Modes】This women sex toy has 9 powerful vibration and 9 hands-free thrust modes. Equips with quiet yet powerful motor, within a few seconds of using our g spot bullet vibrators, you will reach hands-free climax. No worries the thrusting dildos sex toy will fall off, the perfect size makes the rose women vibrators quick and easy to position correctly.</p><p>&nbsp;</p><p>【Medical Silicone Adult Sex Toy for Couples Pleasure】Care Elegance Fashion Intelligence is SVAKOM Mission. Made of soft, smooth＆BPA-Free velvety medical silicone. Ergonomically designed, the rounded clitoral stimulator for women for pleasure is nicely in one hand. Play with water-based lube and cleaned by water and soap or sex toys care fluid.</p><p>&nbsp;</p><p>【Bathroom-Ready &amp; USB Rechargeable Discreet Personal Massager】IPX7 Waterproof – Take sexual pleasure tools with you in the shower for wet and wild fun and none of the power is lost when the sex machine gets submersed. Charging 1 hours, use 2 hours. Carry with SVAKOM customized pouch, Put SVAKOM rose vibrating ball in your pocket or bag whether you are working or traveling, Over 18 years old can use this adult sex toy items.</p><p>&nbsp;</p><p><img fetchpriority="high" decoding="async" class="alignnone size-medium wp-image-3298" src="https://qialata.com/wp-content/uploads/2024/04/1-87-278x300.jpg" alt="" width="278" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/1-87-278x300.jpg 278w, https://qialata.com/wp-content/uploads/2024/04/1-87.jpg 431w" sizes="(max-width: 278px) 100vw, 278px"> <img decoding="async" class="alignnone size-medium wp-image-3302" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01GuIPyB2DoxaOROEGm_2588788657-0-cib-233x300.jpeg" alt="" width="233" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01GuIPyB2DoxaOROEGm_2588788657-0-cib-233x300.jpeg 233w, https://qialata.com/wp-content/uploads/2024/04/O1CN01GuIPyB2DoxaOROEGm_2588788657-0-cib-768x988.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01GuIPyB2DoxaOROEGm_2588788657-0-cib-600x772.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01GuIPyB2DoxaOROEGm_2588788657-0-cib.jpeg 790w" sizes="(max-width: 233px) 100vw, 233px"> <img decoding="async" class="alignnone size-medium wp-image-3326" src="https://qialata.com/wp-content/uploads/2024/04/O1CN0158PsLf2DoxaWEEMF1_2588788657-0-cib-293x300.jpeg" alt="" width="293" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN0158PsLf2DoxaWEEMF1_2588788657-0-cib-293x300.jpeg 293w, https://qialata.com/wp-content/uploads/2024/04/O1CN0158PsLf2DoxaWEEMF1_2588788657-0-cib-768x785.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN0158PsLf2DoxaWEEMF1_2588788657-0-cib-600x614.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN0158PsLf2DoxaWEEMF1_2588788657-0-cib.jpeg 790w" sizes="(max-width: 293px) 100vw, 293px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3300" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01Dc2alV2DoxaYb8h1L_2588788657-0-cib-300x138.jpeg" alt="" width="300" height="138" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01Dc2alV2DoxaYb8h1L_2588788657-0-cib-300x138.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01Dc2alV2DoxaYb8h1L_2588788657-0-cib-768x353.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01Dc2alV2DoxaYb8h1L_2588788657-0-cib-600x276.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01Dc2alV2DoxaYb8h1L_2588788657-0-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3299" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib-198x300.jpeg" alt="" width="198" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib-198x300.jpeg 198w, https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib-678x1024.jpeg 678w, https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib-768x1161.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib-600x907.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01CQoH222DoxaWg8LlO_2588788657-0-cib.jpeg 790w" sizes="(max-width: 198px) 100vw, 198px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3301" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01ehZspj2DoxaWE93S5_2588788657-1-cib-291x300.jpeg" alt="" width="291" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01ehZspj2DoxaWE93S5_2588788657-1-cib-291x300.jpeg 291w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ehZspj2DoxaWE93S5_2588788657-1-cib-768x792.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ehZspj2DoxaWE93S5_2588788657-1-cib-600x619.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ehZspj2DoxaWE93S5_2588788657-1-cib.jpeg 790w" sizes="(max-width: 291px) 100vw, 291px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3303" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-300x300.jpeg" alt="" width="300" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-300x300.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-150x150.jpeg 150w, https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-768x768.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-600x600.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib-100x100.jpeg 100w, https://qialata.com/wp-content/uploads/2024/04/O1CN01iPE05q2DoxaIRo3MC_2588788657-0-cib.jpeg 800w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3304" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01JoXkFz2DoxaORJb1r_2588788657-1-cib-300x246.jpeg" alt="" width="300" height="246" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01JoXkFz2DoxaORJb1r_2588788657-1-cib-300x246.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01JoXkFz2DoxaORJb1r_2588788657-1-cib-768x631.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01JoXkFz2DoxaORJb1r_2588788657-1-cib-600x493.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01JoXkFz2DoxaORJb1r_2588788657-1-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3305" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-300x300.jpeg" alt="" width="300" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-300x300.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-150x150.jpeg 150w, https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-768x768.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-600x600.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib-100x100.jpeg 100w, https://qialata.com/wp-content/uploads/2024/04/O1CN01jY4RYL2DoxaTufCd8_2588788657-0-cib.jpeg 800w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3306" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01K3kyf32DoxaORJneI_2588788657-1-cib-300x163.jpeg" alt="" width="300" height="163" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01K3kyf32DoxaORJneI_2588788657-1-cib-300x163.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01K3kyf32DoxaORJneI_2588788657-1-cib-768x417.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01K3kyf32DoxaORJneI_2588788657-1-cib-600x326.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01K3kyf32DoxaORJneI_2588788657-1-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3307" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib-214x300.jpeg" alt="" width="214" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib-214x300.jpeg 214w, https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib-729x1024.jpeg 729w, https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib-768x1078.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib-600x842.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01lDqf1O2DoxaOROlV9_2588788657-1-cib.jpeg 790w" sizes="(max-width: 214px) 100vw, 214px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3308" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib-160x300.jpeg" alt="" width="160" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib-160x300.jpeg 160w, https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib-545x1024.jpeg 545w, https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib-768x1442.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib-600x1126.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01MuVEVy2DoxaYbB2bD_2588788657-1-cib.jpeg 790w" sizes="(max-width: 160px) 100vw, 160px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3317" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib-189x300.jpeg" alt="" width="189" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib-189x300.jpeg 189w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib-646x1024.jpeg 646w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib-768x1217.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib-600x951.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XMdDfd2DoxaRAkFm1_2588788657-1-cib.jpeg 790w" sizes="(max-width: 189px) 100vw, 189px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3316" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib-209x300.jpeg" alt="" width="209" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib-209x300.jpeg 209w, https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib-715x1024.jpeg 715w, https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib-768x1100.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib-600x860.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01xHeNmU2DoxaRSrYPN_2588788657-0-cib.jpeg 790w" sizes="(max-width: 209px) 100vw, 209px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3315" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib-207x300.jpeg" alt="" width="207" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib-207x300.jpeg 207w, https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib-706x1024.jpeg 706w, https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib-768x1114.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib-600x870.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01VEpIwd2DoxaORL4cb_2588788657-1-cib.jpeg 790w" sizes="(max-width: 207px) 100vw, 207px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3314" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib-169x300.jpeg" alt="" width="169" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib-169x300.jpeg 169w, https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib-578x1024.jpeg 578w, https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib-768x1361.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib-600x1063.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01TiILwp2DoxaWEBsDX_2588788657-1-cib.jpeg 790w" sizes="(max-width: 169px) 100vw, 169px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3313" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01RjMMX92DoxaTwdSIk_2588788657-1-cib-300x160.jpeg" alt="" width="300" height="160" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01RjMMX92DoxaTwdSIk_2588788657-1-cib-300x160.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01RjMMX92DoxaTwdSIk_2588788657-1-cib-768x409.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01RjMMX92DoxaTwdSIk_2588788657-1-cib-600x320.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01RjMMX92DoxaTwdSIk_2588788657-1-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3312" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01P7VOha2DoxaWEAOhw_2588788657-0-cib-300x240.jpeg" alt="" width="300" height="240" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01P7VOha2DoxaWEAOhw_2588788657-0-cib-300x240.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P7VOha2DoxaWEAOhw_2588788657-0-cib-768x614.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P7VOha2DoxaWEAOhw_2588788657-0-cib-600x480.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P7VOha2DoxaWEAOhw_2588788657-0-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3311" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01P3b9v22DoxaSVM5CF_2588788657-1-cib-300x162.jpeg" alt="" width="300" height="162" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01P3b9v22DoxaSVM5CF_2588788657-1-cib-300x162.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P3b9v22DoxaSVM5CF_2588788657-1-cib-768x414.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P3b9v22DoxaSVM5CF_2588788657-1-cib-600x324.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01P3b9v22DoxaSVM5CF_2588788657-1-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3310" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01p2o5Ya2DoxaITgKbl_2588788657-1-cib-300x207.jpeg" alt="" width="300" height="207" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01p2o5Ya2DoxaITgKbl_2588788657-1-cib-300x207.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01p2o5Ya2DoxaITgKbl_2588788657-1-cib-768x529.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01p2o5Ya2DoxaITgKbl_2588788657-1-cib-600x413.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01p2o5Ya2DoxaITgKbl_2588788657-1-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3309" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib-297x300.jpeg" alt="" width="297" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib-297x300.jpeg 297w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib-768x776.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib-600x606.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib-100x100.jpeg 100w, https://qialata.com/wp-content/uploads/2024/04/O1CN01ogRwU92DoxaRSrxZO_2588788657-0-cib.jpeg 790w" sizes="(max-width: 297px) 100vw, 297px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3318" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib-175x300.jpeg" alt="" width="175" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib-175x300.jpeg 175w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib-598x1024.jpeg 598w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib-768x1315.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib-600x1028.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01XZNs9a2DoxaYbC7Fp_2588788657-0-cib.jpeg 790w" sizes="(max-width: 175px) 100vw, 175px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3319" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-300x300.jpeg" alt="" width="300" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-300x300.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-150x150.jpeg 150w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-768x768.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-600x600.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib-100x100.jpeg 100w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zpCdkB2DoxaSTWQPd_2588788657-0-cib.jpeg 800w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3321" src="https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib-189x300.jpeg" alt="" width="189" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib-189x300.jpeg 189w, https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib-645x1024.jpeg 645w, https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib-768x1220.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib-600x953.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN011lvskh2DoxaTwcFIH_2588788657-0-cib.jpeg 790w" sizes="(max-width: 189px) 100vw, 189px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3324" src="https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib-162x300.jpeg" alt="" width="162" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib-162x300.jpeg 162w, https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib-551x1024.jpeg 551w, https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib-768x1426.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib-600x1114.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN015y1U4t2DoxaITdRgm_2588788657-1-cib.jpeg 790w" sizes="(max-width: 162px) 100vw, 162px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3325" src="https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-300x300.jpeg" alt="" width="300" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-300x300.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-150x150.jpeg 150w, https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-768x768.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-600x600.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib-100x100.jpeg 100w, https://qialata.com/wp-content/uploads/2024/04/O1CN0120VQJm2DoxaV9dWc9_2588788657-0-cib.jpeg 800w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3322" src="https://qialata.com/wp-content/uploads/2024/04/O1CN012VqGqy2DoxaRD6bzG_2588788657-0-cib-300x157.jpeg" alt="" width="300" height="157" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN012VqGqy2DoxaRD6bzG_2588788657-0-cib-300x157.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN012VqGqy2DoxaRD6bzG_2588788657-0-cib-768x401.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN012VqGqy2DoxaRD6bzG_2588788657-0-cib-600x314.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN012VqGqy2DoxaRD6bzG_2588788657-0-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3323" src="https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib-210x300.jpeg" alt="" width="210" height="300" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib-210x300.jpeg 210w, https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib-717x1024.jpeg 717w, https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib-768x1098.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib-600x857.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN012vYXom2DoxaXlOPDY_2588788657-0-cib.jpeg 790w" sizes="(max-width: 210px) 100vw, 210px"> <img loading="lazy" decoding="async" class="alignnone size-medium wp-image-3320" src="https://qialata.com/wp-content/uploads/2024/04/O1CN01zqHPtW2DoxaNCTnxL_2588788657-0-cib-300x250.jpeg" alt="" width="300" height="250" srcset="https://qialata.com/wp-content/uploads/2024/04/O1CN01zqHPtW2DoxaNCTnxL_2588788657-0-cib-300x250.jpeg 300w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zqHPtW2DoxaNCTnxL_2588788657-0-cib-768x640.jpeg 768w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zqHPtW2DoxaNCTnxL_2588788657-0-cib-600x500.jpeg 600w, https://qialata.com/wp-content/uploads/2024/04/O1CN01zqHPtW2DoxaNCTnxL_2588788657-0-cib.jpeg 790w" sizes="(max-width: 300px) 100vw, 300px"></p></div>'
    };
  },
  computed: {
    // 商品详情
    skuDetail () {
      return this.detail.data;
    }
  },
  methods: {
    changeHeight (name) { // 设置商品详情高度
      let heightCss = window.getComputedStyle(this.$refs[name]).height;
      heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
      this.$refs.itemIntroDetail.style.height = heightCss + 'px';
    },
    changePageNum (val) { // 修改评论页码
      this.commentParams.pageNumber = val;
      this.getList();
    },
    changePageSize (val) { // 修改评论页数
      this.commentParams.pageNumber = 1;
      this.commentParams.pageSize = val;
      this.getList();
    },
    getList () { // 获取评论列表
      this.commentParams.goodsId = this.skuDetail.goodsId;
      goodsComment(this.commentParams).then(res => {
        if (res.success) {
          this.commentList = res.result.records;
          this.commentTotal = res.result.total;
        }
      });
      goodsCommentNum(this.skuDetail.goodsId).then(res => {
        if (res.success) {
          this.commentTypeNum = res.result;
        }
      });
    },
    viewByGrade (grade) { // 好中差评切换
      this.$set(this.commentParams, 'grade', grade);
      this.commentParams.pageNumber = 1;
      this.getList();
    },
    tabClick (name) { // 商品详情和评价之间的tab切换
      if (name === 0) {
        this.$nextTick(() => {
          this.changeHeight('itemIntroGoods')
        });
      } else {
        this.$nextTick(() => {
          this.changeHeight('itemGoodsComment')
        });
      }
    },
    previewImg (img, item) { // 预览图片
      this.$set(item, 'previewImg', img);
      this.$nextTick(() => {
        this.changeHeight('itemGoodsComment')
      });
    },
    hidePreviewImg (item) { // 隐藏预览图片
      this.$set(item, 'previewImg', '');
      this.$nextTick(() => {
        this.changeHeight('itemGoodsComment')
      });
    },
    rotatePreviewImg (type, item) { // 图片旋转
      if (type) {
        if (item.deg) {
          this.$set(item, 'deg', item.deg + 90);
        } else {
          this.$set(item, 'deg', 90);
        }
      } else {
        if (item.deg) {
          this.$set(item, 'deg', item.deg - 90);
        } else {
          this.$set(item, 'deg', -90);
        }
      }
    },
    handleScroll () { // 监听页面滚动
      if (this.onceFlag) {
        this.$nextTick(() => {
          this.changeHeight('itemIntroGoods')
        });
        this.onceFlag = false
      }
    }
  },
  mounted () {
    this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
      setTimeout(this.changeHeight('itemIntroGoods'), 2000);
    });
    window.addEventListener('scroll', this.handleScroll)
    this.getList();
    if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
      this.skuDetail.grade = 100
    }
  }
};
</script>

<style scoped lang="scss">
.item-intro{
  >img{
    display:block;
  }
}
/***************商品详情介绍和推荐侧边栏开始***************/
.item-intro-show{

  width: 1200px;
  margin: 15px auto;
  display: flex;
  overflow-x: hidden;
  flex-direction: row;

}
.item-intro-recommend{
  width: 200px;
  display: flex;
  flex-direction: column;
}
.item-intro-recommend-column{
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 5px #999;
}
.item-recommend-title{
  width: 100%;
  height: 38px;
  font-size: 16px;
  line-height: 38px;
  color: #fff;
  background-color: $theme_color;
  box-shadow: 0px 0px 5px $theme_color;
  text-align: center;
}
.item-recommend-column{
  margin-top: 15px;
}
.item-recommend-intro{
  padding: 5px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.item-recommend-img{
  width: 80%;
  margin: 0px auto;
  cursor: pointer;
}
.item-recommend-img img{
  width: 100%;
}
.item-recommend-top-num{
  color: #fff;
  margin: 0px 2px;
  padding: 1px 5px;
  border-radius: 12px;
  background-color: $theme_color;
}
.item-recommend-price{
  color: $theme_color;
  font-weight: bolder;
}
.item-intro-detail{
  margin: 0  30px;
  width: 100%;
}
.item-intro-nav{
  width: 100%;
  height: 38px;
  background-color: #F7F7F7;
}
.item-intro-nav ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.item-intro-nav li{
  float: left;
  height: 100%;
  width: 120px;
  line-height: 38px;
  text-align: center;
  color: $theme_color;
}
.item-intro-nav li:first-child{
  background-color: $theme_color;
  color: #fff;
}
.item-intro-img {
  width: 100%;
  min-height: 300px;
  /deep/ img{
    margin:0 auto;
  }
}
.item-intro-img img{
  max-width: 1000px;
}
/************* 商品参数 *************/
.item-param-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.item-param-box {
  padding: 5px;
  padding-left: 30px;
  width: 240px;
  height: 36px;
  font-size: 14px;
}
.item-param-title {
  color: #232323;
}
.item-param-content {
  color: #999;
}
.remarks-title {
  padding-left: 15px;
  height: 36px;
  font-size: 16px;
  font-weight: bolder;
  line-height: 36px;
  color: #666666;
  background-color: #F7F7F7;
}
.remarks-analyse-box {
  padding: 15px;
  display: flex;
  align-items: center;
}
.remarks-analyse-goods {
  margin-left: 15px;
  margin-right: 15px;
}
.remarks-analyse-num {
  font-size: 26px;
}
.remarks-analyse-title {
  font-size: 12px;
  line-height: 20px;
}
.remarks-bar {
  padding-left: 15px;
  height: 36px;
  line-height: 36px;
  color: #666666;
  background-color: #F7F7F7;
  .selectedBar{
    color: $theme_color;
  }
}
.remarks-bar span {
  margin-right: 15px;
  &:hover{
    color: $theme_color;
    cursor: pointer;
  }
}
.remarks-box {
  padding: 15px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #ccc dotted;
}
.remarks-user {
  width: 180px;
}
.remarks-user-name {
  padding-left: 15px;
}
.remarks-content-box {
  width: calc(100% - 180px);
  .comment-img{
    display: flex;
    .borderColor{
      border-color: $theme_color;
    }
    div{
      border: 1px solid #999;
      margin-right: 5px;
      width: 50px;
      height: 50px;
      overflow: hidden;
      img{width: 100%;height: 100%;}
    }
  }
  .preview-img{
    position: relative;
    border: 1px solid #eee;
    margin: 10px 0;
    width: 200px;

    div{
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 3;
      span{
        display: inline-block;
        background-color: rgba(0,0,0,.5);
        padding:3px 5px;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }
      span:nth-child(1) .ivu-icon {
        transform: rotateY(180deg);
      }
    }

  }
}

.remarks-content {
  font-size: 14px;
  color: #232323;
  line-height: 28px;
}
.remarks-sub {
  margin-top: 5px;
  color: #ccc;
}
.remarks-time {
  margin-left: 15px;
}
.remarks-page {
  margin: 15px;
  display: flex;
  justify-content:flex-end;
}
/***************商品详情介绍和推荐侧边栏结束***************/
/* 改变便签页样式 */
.ivu-tabs-ink-bar {
  background-color: $theme_color !important;
}
/deep/.ivu-tabs-bar{
  border: none;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
  border-radius: 0px;
  color: #999;
  height: 38px;
  // background: #F7F7F7;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
  color: #fff;
  background-color: $theme_color;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  color: #fff;
  background: #F7F7F7;
  position: absolute;
  top: 0;
  left: 0;
}
.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
  color: $theme_color;
}
table{
  border-color:#efefef;
  color: #999;
  min-width: 30%;
  margin-left: 30px;
  font-size: 12px;
  tr{
    td:nth-child(1){
      width: 100px;
    }
    td:nth-child(2){
      padding-left: 20px;
    }
  }
  td{
    padding: 6px;
  }
}
.goods-params {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-left: 30px;
  span{color:#999}
}
.reply{
  >*{
    margin: 4px;
  }

}
</style>
